<template>
  <view class="user-container">
    <!-- 公共组件-每个页面必须引入 -->
    <public-module></public-module>
    <!-- 用户信息区 -->
    <view class="user-info">
      <view class="avatar-wrap">
        <u-avatar size="70" :src="userInfo.headImage || userInfo.memberNumber"></u-avatar>
      </view>
      <view v-if="userInfo.token" class="info-content">
        <view class="user-id"
        >会员{{ userInfo.memberName }}
          <view class="vip-tag">
            <view class="info">
              <u--image
                  class="user-icon"
                  width="32rpx"
                  height="32rpx"
                  :src="getImg('home/mine_pin01@2x.png')"
                  mode="aspectFit"
              >
              </u--image>
              <text class="name">{{ userInfo.memberLevelName }}</text>
            </view>
          </view>
        </view>
        <view class="user-number">ID:{{ userInfo.id }}</view>
      </view>
      <view v-if="!userInfo.token" class="info-content" @click="openLogin">
        <view class="user-id">用户未登录</view>
        <view class="user-number">登录后享受更好的服务权益</view>
      </view>
      <view class="setting-icon" @click="onTokenJump('/pages/my/set/index')">
        <u--image
            class="nav-icon"
            width="32rpx"
            height="32rpx"
            :src="getImg('home/mine_set@2x.png')"
            mode="aspectFit"
        >
        </u--image>
      </view>
    </view>

    <!-- 订单金额统计 -->
    <view class="order-stats">
      <view class="stats-section" @click="onTokenJump('/pages/wallet/refund?poolType=2')">
        <view class="section-header">1元专区</view>
        <view class="stats-content">
          <view class="stats-item">
            <view class="amount">{{ orderStats.pending1 }}</view>
            <view class="label">待返金额</view>
          </view>
          <view class="stats-item">
            <view class="amount">{{ orderStats.returned1 }}</view>
            <view class="label">已返金额</view>
          </view>
        </view>
      </view>
      <view class="stats-section" @click="onTokenJump('/pages/wallet/refund?poolType=1')">
        <view class="section-header">折扣专区</view>
        <view class="stats-content">
          <view class="stats-item">
            <view class="amount">{{ orderStats.pending100 }}</view>
            <view class="label">待返金额</view>
          </view>
          <view class="stats-item">
            <view class="amount">{{ orderStats.returned100 }}</view>
            <view class="label">已返金额</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 订单状态导航 -->
    <view
        class="order-nav"
        :style="{
        background:
          'url(' + getImg('home/card_bg@2x.png') + ') no-repeat center/cover',
      }"
    >
      <view
          class="nav-item"
          v-for="(item, index) in orderNavs"
          :key="index"
          @click="handleOrderNav(item.status)"
      >
        <u--image
            class="nav-icon"
            width="52rpx"
            height="52rpx"
            :src="item.icon"
            mode="aspectFit"
        />
        <text class="nav-text">{{ item.text }}</text>
      </view>
    </view>

    <!-- 服务中心 -->
    <view class="service-center">
      <view class="section-title">服务中心</view>
      <view class="service-grid">
        <view
            class="service-item"
            v-for="(item, index) in services"
            :key="index"
            @click="clickFunction(item)"
        >
          <u--image
              class="service-icon"
              width="52rpx"
              height="52rpx"
              :src="item.icon"
              mode="aspectFit"
          />
          <text class="service-text">{{ item.text }}</text>
          <text class="badge" v-if="item.badge">{{ item.badge }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {mapState} from "vuex";
import {getRebateStatistics} from "@/config/api";

export default {
  data() {
    return {
      orderStats: {
        pending1: "0",
        returned1: "0",
        pending100: "0",
        returned100: "0",
      },
      orderNavs: [
        {
          text: "全部",
          icon: this.$base.ossUrl1 + "home/admini_cicon03@2x.png",
          type: "all",
          status: ""
        },
        {
          text: "待付款",
          icon: this.$base.ossUrl1 + "home/admini_cicon03@2x(1).png",
          type: "pending",
          status: 1,
        },
        {
          text: "待发货",
          icon: this.$base.ossUrl1 + "home/admini_cicon03@2x(2).png",
          type: "shipping",
          status: 3,
        },
        {
          text: "已取消",
          icon: this.$base.ossUrl1 + "home/admini_cicon03@2x(3).png",
          type: "cancelled",
          status: 4

        },
        {
          text: "完成",
          icon: this.$base.ossUrl1 + "home/admini_cicon03@2x(4).png",
          type: "completed",
          status: 5,
        },
      ],
      services: [
        {
          text: "返利券",
          icon: this.$base.ossUrl1 + "home/mine_sicon09@2x.png",
          type: "coupon",
          isLogin: true,
          url: '/pages/my/coupon/my'
        },
        {
          text: "收货地址",
          icon: this.$base.ossUrl1 + "home/mine_sicon03@2x.png",
          type: "address",
          isLogin: true,
          url: '/pages/my/address/list',
        },
        {
          text: "帮助中心",
          icon: this.$base.ossUrl1 + "home/mine_sicon09@2x(1).png",
          type: "help",
          url:"/pages/article/list"
        },
       /* {
          text: "消息中心",
          icon: this.$base.ossUrl1 + "home/mine_sicon07@2x.png",
          type: "message",
        },*/
        {
          text: "我的收藏",
          icon: this.$base.ossUrl1 + "home/mine_sicon12@2x.png",
          type: "favorite",
          isLogin: true,
          url: '/pages/my/collect/index'
        },
      /*  {
          text: "分享平台",
          icon: this.$base.ossUrl1 + "home/mine_sicon05@2x.png",
          type: "share",
        },
        {
          text: "用户反馈",
          icon: this.$base.ossUrl1 + "home/mine_sicon10@2x(1).png",
          type: "feedback",
          badge: "1",
        },
        {
          text: "我的客服",
          icon: this.$base.ossUrl1 + "home/mine_sicon04@2x.png",
          type: "service",
        },*/
        {
          text: "关于平台",
          icon: this.$base.ossUrl1 + "home/mine_sicon08@2x.png",
          url: '/pages/article/details?id=1518143724792623106',
          type: "about",
        },
      /*  {
          text: "邀请好友",
          icon: this.$base.ossUrl1 + "home/mine_sicon10@2x.png",
          type: "invite",
        },*/
      ],
    };
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  onShow() {
    this.getRebateStatisticsFunc();
  },
  methods: {
    async getRebateStatisticsFunc() {
      let res = await getRebateStatistics();
      let orderStats = {
        pending1: "0",
        returned1: "0",
        pending100: "0",
        returned100: "0",
      };
      for (let i = 0; i < res.length; i++) {
        const item = res[i];
        if (item.poolType === 2) {
          orderStats.pending1 = item.remaining;
          orderStats.returned1 = item.rebatedAmount;
        }
        if (item.poolType === 1) {
          orderStats.pending100 = item.remaining;
          orderStats.returned100 = item.rebatedAmount;
        }
      }
      this.orderStats = orderStats;
    },
    // 页面跳转
    onJump(url) {
      uni.navigateTo({
        url: url
      })
    },
    // 跳转前判断登录
    onTokenJump(url) {
      this.judgeLogin(() => {
        uni.navigateTo({
          url: url
        });
      });
    },
    handleOrderNav(status) {
      // 处理订单导航点击
      if (status === "") {
        this.onTokenJump('/pages/my/order/list');
      } else {
        this.onTokenJump('/pages/my/order/list?orderStatus=' + status);
      }
    },
    clickFunction(item) {
      if (item.url) {
        if (item.isLogin) {
          this.onJump(item.url);
          //this.onTokenJump(item.url);
        } else {
          this.onJump(item.url);
        }
      } else {
        uni.$u.toast('~功能正在开发中~');
      }
    }, // 是否登录
    openLogin() {
      this.judgeLogin();
    },

    getImg(path) {
      return this.$base.ossUrl1 + path;
    },
  },
};
</script>

<style lang="scss">
.user-container {
  min-height: 100vh;
  padding-bottom: 100rpx;
  background: #f8f8f8;
  background: linear-gradient(to bottom right, #eafffe, #f4f5f5, #f5f5f5);
}

.user-info {
  position: relative;
  display: flex;
  align-items: center;
  padding: 40rpx 30rpx;
  /* #ifdef H5 */
  padding-top: 40rpx;
  /* #endif */
  /* #ifdef MP */
  padding-top: 140rpx;
  /* #endif */
  /* #ifdef APP-PLUS */
  padding-top: 100rpx;
  /* #endif */
  .avatar-wrap {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 20rpx;
  }

  .avatar {
    width: 100%;
    height: 100%;
  }

  .info-content {
    flex: 1;
  }

  .user-id {
    font-size: 32rpx;
    font-weight: 500;
    margin-bottom: 10rpx;

    .vip-tag {
      margin-left: 10rpx;
      display: inline-block;

      .info {
        display: flex;
        align-items: center;

        .name {
          font-size: 24rpx;
          color: #b07104;
          padding: 4rpx 12rpx;
          border-radius: 20rpx;
          margin-left: 2rpx;
        }
      }
    }
  }

  .user-number {
    font-size: 26rpx;
    color: #999;
  }

  .setting-icon {
    padding: 20rpx;
    font-size: 40rpx;
    color: #666;
  }
}

.order-stats {
  display: flex;
  background: #f3f8f8;
  margin: 20rpx;
  justify-content: space-between;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;

  .stats-section {
    background: linear-gradient(
            to bottom,
            #e3fcfc 0%,
            #f9fefe 50%,
            #ffffff 100%
    );
    padding: 20rpx 0;
    position: relative;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    width: 49%;

    &:first-child:after {
      /* content: '';
       position: absolute;
       right: 0;
       top: 20%;
       height: 60%;
       width: 1px;
       background: #eee;*/
    }

    .section-header {
      text-align: center;
      font-size: 28rpx;
      color: #07605e;
      font-weight: 500;
      margin-bottom: 20rpx;
      position: relative;

      &::before,
      &::after {
        content: "";
        position: absolute;
        top: 50%;
        width: 50rpx;
        height: 1px;
        background: #98ecec;
      }

      &::before {
        left: 20%;
      }

      &::after {
        right: 20%;
      }
    }

    /*    .section-header {
          text-align: center;
          font-size: 28rpx;
          color: #07605E;
          font-weight: 500;
          margin-bottom: 20rpx;

        }*/
  }

  .stats-content {
    display: flex;
  }

  .stats-item {
    flex: 1;
    text-align: center;
  }

  .amount {
    font-size: 32rpx;
    font-weight: 500;
    color: #333;
    margin-bottom: 10rpx;
  }

  .label {
    font-size: 24rpx;
    color: #999;
  }
}

.order-nav {
  display: flex;
  background: #fff;
  padding: 0rpx 20rpx;
  margin: 20rpx;
  border-radius: 12rpx;
  height: 184rpx;
  box-sizing: border-box;
  align-items: center;

  .nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .nav-icon {
    width: 48rpx;
    height: 48rpx;
    margin-bottom: 10rpx;
  }

  .nav-text {
    font-size: 24rpx;
    color: #915638;
    margin-top: 12rpx;
  }
}

.service-center {
  background: #fff;
  margin: 20rpx;
  padding: 30rpx;
  border-radius: 12rpx;

  .section-title {
    font-size: 32rpx;
    font-weight: 600;
    margin-bottom: 30rpx;
  }

  .service-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30rpx;
  }

  .service-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
  }

  .service-icon {
    width: 60rpx;
    height: 60rpx;
    margin-bottom: 10rpx;
  }

  .service-text {
    font-size: 28rpx;
    color: #1f1f1f;
  }

  .badge {
    position: absolute;
    top: -10rpx;
    right: 20rpx;
    background: #ff4d4f;
    color: #fff;
    font-size: 20rpx;
    padding: 2rpx 10rpx;
    border-radius: 20rpx;
  }
}
</style>
